<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Matrix - Responsive Tile-Based Template</title>
<link href="style.css" title="style" rel="stylesheet" type="text/css" />
<link id="clink" href="css/style-blue.css" title="style" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.masonry.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/MetroJs.lt.js" type="text/javascript"></script>
<script src="scripts/jquery.fancybox-1.3.4.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/jquery.flexslider-min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/hoverintent.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/organictabs.jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
  <style type="text/css">
  @import url("style-ie8.css");
  </style>
  <script src="scripts/css3-mediaqueries.js" type="text/javascript" charset="utf-8"></script>
  <script>
    document.createElement('header');
    document.createElement('nav');
    document.createElement('section');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer');
    document.createElement('hgroup');
    </script>
<![endif]-->
<script src="scripts/javascript.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="bodypat">
<section id="container">
    <div id="colorchanger">
    <a href="?theme=blue" class="cblue cbox" title="Blue Theme"><span class="blue">Blue</span></a>
    <a href="?theme=red" class="cred cbox" title="Red Theme"><span class="red">Red</span></a>
    <a href="?theme=green" class="cgreen cbox" title="Green Theme"><span class="green">Green</span></a>
    <a href="?theme=magenta" class="cmagenta cbox" title="Magenta Theme"><span class="magenta">Magenta</span></a>
    <a href="?theme=purple" class="cpurple cbox" title="Purple Theme"><span class="purple">Purple</span></a>
    <a href="?theme=teal" class="cteal cbox" title="Teal Theme"><span class="teal">Teal</span></a>
    <a href="?theme=lime" class="clime cbox" title="Lime Theme"><span class="lime">Lime</span></a>
    <a href="?theme=brown" class="cbrown cbox" title="Brown Theme"><span class="brown">Brown</span></a>
    <a href="?theme=pink" class="cpink cbox" title="Pink Theme"><span class="pink">Pink</span></a>
    <a href="?theme=mango" class="cmango cbox" title="Mango Theme"><span class="mango">Mango</span></a>
    <h4>Theme Color Selector</h4>
    </div>
<!-- BEGIN HEADER -->
<header class="clearfix">
<!-- BEGIN LOGO -->
<a id="headerlink" href="#" title="home"><img id="logo" src="images/logo.png" alt="logo" /><span id="sitename">Matrix</span></a>
<!-- END LOGO -->

<!-- BEGIN NAVIGATION -->
<nav>
<ul id="nav" class="clearfix">
<!-- Menu Item 1 -->
	<li class="current"><a href="index.html" title="Home"><span>Home</span></a></li>
<!-- Menu Item 2 -->
    <li>
    	<a href="#" title="Portfolio"><span>Portfolio</span></a>
        <ul>
        	<li><a href="portfoliotile-large.html" title="Portfolio"><span>Tile - Large</span></a></li>
            <li><a href="portfoliotile-medium.html" title="Portfolio"><span>Tile - Medium</span></a></li>
            <li><a href="portfoliotile-small.html" title="Portfolio"><span>Tile - Small</span></a></li>
            <li><a href="portfoliolist.html" title="Portfolio"><span>Portfolio List</span></a></li>
            <li><a href="singleportfolio.html" title="Portfolio"><span>Single Item</span></a></li>
        </ul>
    </li>
<!-- Menu Item 3 -->
    <li><a href="#" title="Blog"><span>Blog</span></a>
    	<ul>
        	<li><a href="blogtile-large.html" title="Blog"><span>Tile - Large</span></a></li>
            <li><a href="blogtile-medium.html" title="Blog"><span>Tile - Medium</span></a></li>
        	<li><a href="bloglist.html" title="Blog List"><span>Blog List</span></a></li>
        	<li><a href="singleblogpost-1.html" title="Article 1"><span>Single Post</span></a></li>
        </ul>
    </li>
<!-- Menu Item 4 -->
    <li>
    	<a href="#" title="Features"><span>Features</span></a>
        <ul>
        	<li><a href="features-main.html" title="Features"><span>Main Features</span></a></li>
            <li><a href="features-columns.html" title="Features"><span>Columns</span></a></li>
            <li><a href="features-content.html" title="Features"><span>Content Area</span></a></li>
        </ul>
    </li>
<!-- Menu Item 5 -->
    <li><a href="aboutus.html" title="About"><span>About</span></a></li>
<!-- Menu Item 6 -->
    <li><a href="contact.html" title="Contact"><span>Contact</span></a></li>
</ul>
</nav>
<!-- END NAVIGATION -->
</header>
<!-- END HEADER -->

<!-- BEGIN MAIN PAGE CONTENT -->
<section class="mainpage">
	<!-- BEGIN TOGGLE CONTENT -->
	<div class="toggle-button"><span class="toggle-indicator">+</span></div>
    
    <div class="toggle-content close">
        <div class="flexslider mainslide">
        <ul class="slides">
            <li>
            <img src="images/slideimg1.png" alt="Responsive" />
            <p class="flex-title">Responsive</p>
            </li>
            <li>
            <img src="images/slideimg2.png" alt="Tile Design" />
            <p class="flex-title">Tile Design</p>
            </li>
            <li>
            <img src="images/slideimg3.png" alt="Customizability" />
            <p class="flex-title">Customizability</p>
            </li>
        </ul>
        </div><!-- end .flexslider -->
    
    <div class="quote-bg1"><div class="quote-w">Hello! This is a Metro UI-inspired template which brings a new web-browsing experience to the users. To further improve it, feedbacks are greatly welcomed!</div></div>
    
    </div><!-- end .toggle-content -->
    <!-- END TOGGLE CONTENT -->
</section><!-- end #mainpage -->

<!-- BEGIN TILE CONTENT -->
<section id="content-mos" class="centered clearfix">
<!-- Tile 1 -->
<a href="#article-1" class="lightbox" rel="section">
    <div class="tile large live" data-stops="0,25%,50%,75%,100%" data-speed="3000" data-delay="0" data-direction="horizontal" data-stack="true">
        <div class="live-front">
        	<img class="live-img" src="images/articles/article1_right.png" alt="Article 1" />
        </div>
        <div class="live-back">
        	<img class="live-img" src="images/articles/article1_left.png" alt="Article 1" />
        </div>
        <span class="tile-date redtxt"><span class="date">09</span><span class="month">July</span></span>
        <span class="tile-cat red">Illustration</span>
    </div>
</a>
	<!-- Lightbox Article Preview -->
    <div class="tile-pre">
    <article id="article-1" class="lb-article">
    <div class="article-img">
        <div class="flexslider postslide">
        <ul class="slides">
    	<li>
        <img class="tile-pre-img" src="images/articles/article1.png" alt="Article 1" />
        </li>
        <li>
        <img class="tile-pre-img" src="images/articles/article1a.png" alt="Article 1" />
        </li>
        </ul>
        </div>
    </div>
    <div class="article-date redtxt"><span class="date">09</span><span class="month">July</span></div>
    <h1 class="lb-title"><a href="singleblogpost-1.html">This is the title of Article 1</a></h1>
    <span class="postcat redtxt">Illustration</span>
    <div class="lb-excerpt">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna. Morbi laoreet molestie odio sed ultrices. Maecenas eget elit orci. Etiam rhoncus urna vitae neque accumsan et vehicula dolor varius. Praesent tellus velit. <b>This image is a fantastic work by Mads Berg</a></b>...</p>
        <p><a class="exp-button" href="singleblogpost-1.html">Read More &#8594;</a></p>
    </div>
    </article>
    </div>
    
<!-- Tile 2 -->
<a href="#article-2" class="lightbox" rel="section">
    <div class="tile medium live" data-stops="0,75%,100%" data-speed="750" data-delay="1500">
    	<div class="live-front blue">
        	<img class="live-img" src="images/articles/article2_1.png" alt="Article 2" />
        </div>
        <div class="live-back green">
        	<img class="live-img" src="images/articles/article2_2.png" alt="Article 2" />
        </div>
        <span class="tile-date limetxt"><span class="date">06</span><span class="month">July</span></span>
        <span class="tile-cat lime">Cartoon Design</span>
    </div>
</a>
	<!-- Lightbox Article Preview -->
    <div class="tile-pre">
    <article id="article-2" class="lb-article">
    <div class="article-img">
    	<div class="flexslider postslide">
        <ul class="slides">
        <li>
    	<img class="tile-pre-img" src="images/articles/article2.png" alt="Article Two" />
        </li>
        <li>
    	<img class="tile-pre-img" src="images/articles/article2a.png" alt="Article Two" />
        </li>
        </ul>
        </div>
    </div>
    <div class="article-date limetxt"><span class="date">06</span><span class="month">July</span></div>
    <h1 class="lb-title"><a href="singleblogpost-1.html">This is the title of Article Two</a></h1>
    <span class="postcat limetxt">Cartoon Design</span>
    <div class="lb-excerpt">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna. Morbi laoreet molestie odio sed ultrices. Maecenas eget elit orci. Etiam rhoncus urna vitae neque accumsan et vehicula dolor varius. Praesent tellus velit. <b>This image is a fantastic work by Mads Berg</a></b>...</p>
        <p><a class="exp-button" href="singleblogpost-1.html">Read More &#8594;</a></p>
    </div>
    </article>
    </div>
    
<!-- Tile 3 -->
<a href="#portfolio-1" class="lightbox" rel="section">
    <div class="tile small">
    <img class="live-img" src="images/portfolio/item1_sq.png" alt="Project One" />
    </div>
</a>
	<!-- Lightbox Article Preview -->
    <div class="tile-pre">
    <article id="portfolio-1" class="lb-portfolio">
    <div class="portfolio-img">
    <img class="tile-pre-img" src="images/portfolio/item1.png" alt="Project One" />
    </div>
    <div class="lb-port-cont">
        <h1 class="lb-project"><a href="singleportfolio.html">Project One</a></h1>
        <span class="projectcat redtxt">Illustration</span>
        <div class="lb-desc">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna. Morbi laoreet molestie odio sed ultrices. Maecenas eget elit orci. Etiam rhoncus urna vitae neque accumsan et vehicula dolor varius. Praesent tellus velit. <b>This image is a fantastic work by Mads Berg</a></b>...</p>
            <p><a class="exp-button" href="singleportfolio.html">View More &#8594;</a></p>
        </div>
    </div>
    </article>
    </div>

<!-- Tile 4 -->
<a href="#portfolio-2" class="lightbox" rel="section">
    <div class="tile small">
    <img class="live-img" src="images/portfolio/item2_sq.png" alt="Project Two" />
    </div>
</a>
    <!-- Lightbox Article Preview -->
    <div class="tile-pre">
    <article id="portfolio-2" class="lb-portfolio">
    <div class="portfolio-img">
    <img class="tile-pre-img" src="images/portfolio/item2.png" alt="Project Two" />
    </div>
    <div class="lb-port-cont">
        <h1 class="lb-project"><a href="singleportfolio.html">Project Two</a></h1>
        <span class="projectcat tealtxt">Graphic Design</span>
        <div class="lb-desc">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna. Morbi laoreet molestie odio sed ultrices. Maecenas eget elit orci. Etiam rhoncus urna vitae neque accumsan et vehicula dolor varius. Praesent tellus velit. <b>This image is a fantastic work by Mads Berg</a></b>...</p>
            <p><a class="exp-button" href="singleportfolio.html">View More &#8594;</a></p>
        </div>
    </div>
    </article>
    </div>

<!-- Tile 5 -->
<a href="#portfolio-3" class="lightbox" rel="section">
    <div class="tile small">
    <img class="live-img" src="images/portfolio/item3_sq.png" alt="Project Three" />
    </div>
</a>
    <!-- Lightbox Article Preview -->
    <div class="tile-pre">
    <article id="portfolio-3" class="lb-portfolio">
    <div class="portfolio-img">
    <img class="tile-pre-img" src="images/portfolio/item3.png" alt="Project Three" />
    </div>
    <div class="lb-port-cont">
        <h1 class="lb-project"><a href="singleportfolio.html">Project Three</a></h1>
        <span class="projectcat redtxt">Illustration</span>
        <div class="lb-desc">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna. Morbi laoreet molestie odio sed ultrices. Maecenas eget elit orci. Etiam rhoncus urna vitae neque accumsan et vehicula dolor varius. Praesent tellus velit. <b>This image is a fantastic work by Mads Berg</a></b>...</p>
            <p><a class="exp-button" href="singleportfolio.html">View More &#8594;</a></p>
        </div>
    </div>
    </article>
    </div>
    
<!-- Tile 6 -->
<a href="#quotation-1" class="lightbox" rel="section">
    <div class="tile small live" data-mode="flip" data-stops="100%" data-speed="750" data-delay="4000">
    	<div class="live-front">
        	<img class="live-img" src="images/articles/quotation_1.png" alt="Quotation" />
        </div>
        <div class="live-back">
        	<img class="live-img" src="images/articles/quotation_2.png" alt="Quotation" />
        </div>
    </div>
</a>
    <!-- Lightbox Article Preview -->
    <div class="tile-pre">
    <article id="quotation-1" class="lb-article">
    <div class="lb-quote">
    The person who reads too much and uses his brain too little will fall into lazy habits of thinking.
    <div class="quote-author">&mdash; Albert Einstein</div>
    </div>
    </article>
    </div>

<!-- Tile 7 -->
<a href="#portfolio-5" class="lightbox" rel="section">
    <div class="tile small">
    <img class="live-img" src="images/portfolio/item5_sq.png" alt="Project Five" />
    </div>
</a>
    <!-- Lightbox Article Preview -->
    <div class="tile-pre">
    <article id="portfolio-5" class="lb-portfolio">
    <div class="portfolio-img">
    <img class="tile-pre-img" src="images/portfolio/item5.png" alt="Project Five" />
    </div>
    <div class="lb-port-cont">
        <h1 class="lb-project"><a href="singleportfolio.html">Project Four</a></h1>
        <span class="projectcat tealtxt">Graphic Design</span>
        <div class="lb-desc">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna. Morbi laoreet molestie odio sed ultrices. Maecenas eget elit orci. Etiam rhoncus urna vitae neque accumsan et vehicula dolor varius. Praesent tellus velit. <b>This image is a fantastic work by Mads Berg</a></b>...</p>
            <p><a class="exp-button" href="singleportfolio.html">View More &#8594;</a></p>
        </div>
    </div>
    </article>
    </div>
    
<!-- Tile 8 -->
<a href="#portfolio-4" class="lightbox" rel="section">
    <div class="tile small">
    <img class="live-img" src="images/portfolio/item4_sq.png" alt="Project Four" />
    </div>
</a>
    <!-- Lightbox Article Preview -->
    <div class="tile-pre">
    <article id="portfolio-4" class="lb-portfolio">
    <div class="portfolio-img">
    <img class="tile-pre-img" src="images/portfolio/item4.png" alt="Project Four" />
    </div>
    <div class="lb-port-cont">
        <h1 class="lb-project"><a href="singleportfolio.html">Project Five</a></h1>
        <span class="projectcat tealtxt">Graphic Design</span>
        <div class="lb-desc">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna. Morbi laoreet molestie odio sed ultrices. Maecenas eget elit orci. Etiam rhoncus urna vitae neque accumsan et vehicula dolor varius. Praesent tellus velit. <b>This image is a fantastic work by Mads Berg</a></b>...</p>
            <p><a class="exp-button" href="singleportfolio.html">View More &#8594;</a></p>
        </div>
    </div>
    </article>
    </div>

<!-- Tile 9 -->
    <div class="tile small live exclude" data-stops="0,100%" data-speed="1000" data-delay="1500">
    	<div class="live-front red">
        <span class="tile-text">Solid Color</span>
        </div>
        <div class="live-back green">
        <span class="tile-text">No Hover Effect</span>
        </div>
    </div>
    
<!-- Tile 10 -->
<a href="#video-1" class="lightbox" rel="section">
    <div class="tile small live" data-mode="flip" data-stops="100%" data-speed="750" data-delay="3000">
    	<div class="live-front">
        	<img class="live-img" src="images/articles/video1.jpg" alt="Video 1" />
        </div>
        <div class="live-back blue">
        	<img class="live-img" src="images/video.png" alt="Video Icon" />
        </div>
    </div>
</a>
    <!-- Lightbox Article Preview -->
    <div class="tile-pre"> 
    <article id="video-1" class="lb-article">  
    <div class="lb-video"> 
<iframe src="http://www.cssmoban.com/?video/3114617?loop=1" width="640" height="272"></iframe> <p><a href="http://vimeo.com/3114617">SCINTILLATION</a> from <a href="http://vimeo.com/chassaingxavier">Xavier Chassaing</a> on <a href="http://vimeo.com">Vimeo</a>.</p> <p>This is an experimental film made up of over 35,000 photographs. It combines an innovative mix of stop motion and live projection mapping techniques. <br /> <br /> Directed by<br /> chassaing.xavier@gmail.com<br /> <br /> Music by <br /> http://www.myspace.com/fedaden</p>
    </div>
    </article>
    </div>
    
<!-- Tile 11 -->
<a href="#portfolio-6" class="lightbox" rel="section">
    <div class="tile small">
    <img class="live-img" src="images/portfolio/item6_sq.png" alt="Project Six" />
    </div>
</a>
	<!-- Lightbox Article Preview -->
    <div class="tile-pre">
    <article id="portfolio-6" class="lb-portfolio">
    <div class="portfolio-img">
    <img class="tile-pre-img" src="images/portfolio/item6.png" alt="Project Six" />
    </div>
    <div class="lb-port-cont">
        <h1 class="lb-project"><a href="singleportfolio.html">Project Six</a></h1>
        <span class="projectcat redtxt">Illustration</span>
        <div class="lb-desc">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna. Morbi laoreet molestie odio sed ultrices. Maecenas eget elit orci. Etiam rhoncus urna vitae neque accumsan et vehicula dolor varius. Praesent tellus velit. <b>This image is a fantastic work by Mads Berg</a></b>...</p>
            <p><a class="exp-button" href="singleportfolio.html">View More &#8594;</a></p>
        </div>
    </div>
    </article>
    </div>
    
<!-- Tile 12 -->
    <div class="tile large live exclude" data-stack="true" data-stops="0,18%" data-speed="1000" data-delay="3000">
    	<div class="live-front themecolor">
        	<ul id="tweeter"></ul>
        </div>
        <div class="live-back themecolor">
        	<span class="tile-text tweeter">Twitter</span>
        </div>
    </div>
    
<!-- Tile 13 -->
<a href="#article-3" class="lightbox" rel="section">
    <div class="tile medium">
        	<img class="live-img" src="images/articles/article3_tile.png" alt="Article 3" />
        <span class="tile-date tealtxt"><span class="date">01</span><span class="month">July</span></span>
        <span class="tile-cat teal">Graphic Design</span>
    </div>
</a>
	<!-- Lightbox Article Preview -->
    <div class="tile-pre">
    <article id="article-3" class="lb-article">
    <div class="article-img">
    	<img class="tile-pre-img" src="images/articles/article3.png" alt="Article Three" />
    </div>
    <div class="article-date tealtxt"><span class="date">01</span><span class="month">July</span></div>
    <h1 class="lb-title"><a href="singleblogpost-1.html">This is the title of Article Three</a></h1>
    <span class="postcat tealtxt">Graphic Design</span>
    <div class="lb-excerpt">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna. Morbi laoreet molestie odio sed ultrices. Maecenas eget elit orci. Etiam rhoncus urna vitae neque accumsan et vehicula dolor varius. Praesent tellus velit. <b>This image is a fantastic work by Mads Berg</a></b>...</p>
        <p><a class="exp-button" href="singleblogpost-1.html">Read More &#8594;</a></p>
    </div>
    </article>
    </div>
    
<!-- Tile 14 -->
<a href="#portfolio-7" class="lightbox" rel="section">
    <div class="tile small">
    <img class="live-img" src="images/portfolio/item7_sq.png" alt="Project Seven" />
    </div>
</a>
	<!-- Lightbox Article Preview -->
    <div class="tile-pre">
    <article id="portfolio-7" class="lb-portfolio">
    <div class="portfolio-img">
    <img class="tile-pre-img" src="images/portfolio/item7.png" alt="Project Seven" />
    </div>
    <div class="lb-port-cont">
        <h1 class="lb-project"><a href="singleportfolio.html">Project Seven</a></h1>
        <span class="projectcat redtxt">Illustration</span>
        <div class="lb-desc">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna. Morbi laoreet molestie odio sed ultrices. Maecenas eget elit orci. Etiam rhoncus urna vitae neque accumsan et vehicula dolor varius. Praesent tellus velit. <b>This image is a fantastic work by Mads Berg</a></b>...</p>
            <p><a class="exp-button" href="singleportfolio.html">View More &#8594;</a></p>
        </div>
    </div>
    </article>
    </div>
     
<!-- Tile 15 -->
<a href="http://validator.w3.org/check?uri=referer">
    <div class="tile small live" data-stack="true" data-stops="0,100%" data-speed="750" data-delay="2500">
    	<div class="live-front mango">
        	<img class="live-img" src="images/articles/html5.png" alt="HTML5 Icon" />
        </div>
        <div class="live-back lime">
        	<img class="live-img" src="images/hyperlink.png" alt="Hyperlink Icon" />
        </div>
    </div>
</a>

<!-- Tile 16 -->
<a href="#portfolio-8" class="lightbox" rel="section">
    <div class="tile small">
    <img class="live-img" src="images/portfolio/item8_sq.png" alt="Project Seven" />
    </div>
</a>
	<!-- Lightbox Article Preview -->
    <div class="tile-pre">
    <article id="portfolio-8" class="lb-portfolio">
    <div class="portfolio-img">
    <img class="tile-pre-img" src="images/portfolio/item8.png" alt="Project Eight" />
    </div>
    <div class="lb-port-cont">
        <h1 class="lb-project"><a href="singleportfolio.html">Project Eight</a></h1>
        <span class="projectcat tealtxt">Graphic Design</span>
        <div class="lb-desc">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna. Morbi laoreet molestie odio sed ultrices. Maecenas eget elit orci. Etiam rhoncus urna vitae neque accumsan et vehicula dolor varius. Praesent tellus velit. <b>This image is a fantastic work by Mads Berg</a></b>...</p>
            <p><a class="exp-button" href="singleportfolio.html">View More &#8594;</a></p>
        </div>
    </div>
    </article>
    </div>
    
<!-- END TILE CONTENT -->
</section><!-- end #content-mos-->
<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >网页模板</a></div>
<section class="mainpage">
<!-- BEGIN TOGGLE CONTENT -->
<div class="toggle-button"><span class="toggle-indicator">+</span></div>

<div class="toggle-content close clearfix">
<!-- Item 1 -->
    <div class="fixed-medium">
        <div class="highlights">
        <img class="themecolor" src="images/responsive.png" alt="Responsive Design" />
        </div>
        <div class="highlights-txt">
        <h2>Responsive Design</h2>
        <p>The template will automatically resize to fit the browser according to its width. So, this template works not just on your desktop monitor, but your tablet or mobile phone as well!</p>
        </div>
    </div>
<!-- Item 2 -->
    <div class="fixed-medium">
        <div class="highlights">
        <img class="themecolor" src="images/livetiles.png" alt="Live Tiles" />
        </div>
        <div class="highlights-txt">
        <h2>Live Tiles</h2>
        <p>As inspired by Metro UI, these 'Live' tiles can display more information without utilizing more screen space. Hence, it is not just the perfect solution for small-screened mobile devices, but also attractive.</p>
        </div>
    </div>
<!-- Item 3 -->
    <div class="fixed-medium last">
        <div class="highlights">
        <img class="themecolor" src="images/customizability.png" alt="Customizability" />
        </div>
        <div class="highlights-txt">
        <h2>Customizability</h2>
        <p>Comes pre-loaded with 10 colours and easy-to-use colour tags, as well as multiple-sized tiles which automatically arrange themselves to fit the screen, you can create any layout you can imagine.</p>
        </div>
    </div>
    
</div><!-- end .toggle-content -->
<!-- END TOGGLE CONTENT -->

</section><!-- end .main-page -->
<!-- END MAIN PAGE CONTENT -->

<!-- BEGIN FOOTER -->
<footer class="clearfix">

<div id="footer-social">
<a href="#"><span class="behance-mini"></span></a>
<a href="#"><span class="twitter-mini"></span></a>
<a href="#"><span class="facebook-mini"></span></a>
<a href="#"><span class="linkedin-mini"></span></a>
<a href="#"><span class="pinterest-mini"></span></a>
<a href="#"><span class="dribbble-mini"></span></a>
</div><!-- end #footer-social -->

<small>&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a> - <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></small>
</footer>
<!-- END FOOTER -->

</section><!-- end #container -->
</div>

</body>
</html>
